<script setup>
import { reactive, ref, computed, onMounted } from "vue";
import { findAllCategory, findAllTagByCategoryId, findAllTag } from "@/api/common/common.js"
import { listByTagId, findUserInterestTags, addInterestTags, listByInterest, listByRecommend, search } from "@/api/common/index.js"
import { useRouter } from 'vue-router';
import { UserFilled, Search } from "@element-plus/icons-vue";
import { removeToken } from "@/composables/cookie";
import { showMessage, showModel } from "@/composables/util.js";
import { updatePassword, updateUserInfo } from "@/api/common/user"
import { uploadFile } from "@/api/common/file"
import moment from 'moment'
const router = useRouter()
// 从浏览器本地存储中取出用户信息
let userInfo = JSON.parse(localStorage.getItem("userInfo"))
// 控制个人信息弹出框
let info = ref(false)
let password = ref(false)
// 设置默认激活的导航项
const activeIndex = ref('1')
const form1 = reactive({
  id: null,
  username: null,
  avatar: null,
  token: null
})
const form2 = reactive({
  username: '',
  password: '',
  newPassword: '',
  surePassword: ''
})

onMounted(() => {
    if(userInfo !== null) {
      form1.id = userInfo.id
      form1.username = userInfo.username
      form1.avatar = userInfo.avatar
      form1.token = userInfo.token
      form2.username = userInfo.username
    } 
})

const handleAvatarChange = (file) => {
  console.log("进入handleAvatarChange")
  // 创建表单对象
  let formData = new FormData()
  formData.append('file', file.raw)
  // 调用后台文件上传接口
  uploadFile(formData).then((e) => {
    // 响参失败，提示错误消息
    if (e.data.success == false) {
      let message = e.message
      showMessage(message, 'error')
      return
    }
    // 成功则设置头像链接，并提示成功
    form1.avatar = e.data.data
    console.log("头像地址："+form1.avatar)
  })
}

// 修改用户信息
const saveInfo = () => {
  // 调用后端修改用户信息接口
  updateUserInfo(form1).then((res) => {
    if(res.data.success === true){
      // 提示修改成功
      showMessage('修改成功')
      // 更新存储的用户信息JSON格式到Local Storage(浏览器本地存储) 中
      localStorage.setItem("userInfo", JSON.stringify(res.data.data))
      // 更新之前获取的用户信息变量
      userInfo = JSON.parse(localStorage.getItem("userInfo"))
      info = false
      window.location.reload();
    }else {
      let message = res.data.message
      console.log(message)
      // 提示消息
      showMessage(message, 'error')
    }
  })
}

// 修改用户密码
const savePassword = () => {
  if(form2.newPassword !== form2.surePassword) {
    showMessage('两次密码输入不一致', 'error')
    return
  }
  // 调用后端修改用户信息接口
  updatePassword(form2).then((res) => {
    if(res.data.success === true){
      // 提示修改成功
      showMessage('修改成功')
      // 删除cookie中的token
      removeToken()
      // 删除Local Storage中的userInfo
      localStorage.removeItem('userInfo')
      // 重新跳转登录页面
      router.push('/login')
    }else {
      let message = res.data.message
      console.log(message)
      // 提示消息
      showMessage(message, 'error')
    }
  })

}
// 控制选择兴趣弹出框
const interestdialogVisible = ref(false)
const selectedTags = ref([])

// 退出登录方法
const logout = () => {
  showModel('是否退出登录?').then(() => {
    // 删除cookie中的token
    removeToken()
    // 删除Local Storage中的userInfo
    localStorage.removeItem('userInfo')
    showMessage('退出登录成功!')
    // 跳转登录页
    router.push('/login')
  })
}

// 课程数据
const courseList = ref([])
// 文章分类获取
const categories = ref([])
findAllCategory().then((res) => {
  console.log('获取所有分类数据：' + JSON.stringify(res.data.data))
  categories.value = res.data.data
})

// 全部标签获取
const tagList = ref([])
findAllTag().then((res) => {
  console.log('获取所有标签数据：' + JSON.stringify(res.data.data))
  tagList.value = res.data.data
})

const handleMouseEnter = (id) => {
  // 悬停逻辑
  console.log('Enter:', id)
  getTags(id)
}

const handleMouseLeave = (id) => {
  // 离开逻辑
  console.log('Leave:', id)
}

// 对应分类的标签数据
const tags = ref([])
// 获取对应分类的标签数据
function getTags(id) {
  // 调用后台分页接口，并传入所需参数
  findAllTagByCategoryId({ id: id })
    .then((res) => {
      if (res.data.success == true) {
        tags.value = res.data.data
      }
    })
}
// 该用户感兴趣的标签
const userTags = ref([])
function getUserTags(userInfo) {
  if (userInfo) {
    findUserInterestTags({ id: userInfo.id })
      .then((res) => {
        if (res.data.success == true) {
          userTags.value = res.data.data
          selectedTags.value = userTags.value.map(item => item.id);

        }
      })

  }
  listByInterest({ tagIds: selectedTags.value })
    .then((res) => {
      if (res.data.success == true) {
        courseList.value = res.data.data
      }
    })

}
getUserTags(userInfo)

function saveInterestTags() {
  if(!userInfo) {
    showMessage('请先登录!', 'error')
  }
  addInterestTags({ userId: userInfo.id, tagIds: selectedTags.value })
    .then((res) => {
      if (res.data.success == true) {
        showMessage('选择标签兴趣成功!')
        title.value = '为你推荐'
        interestdialogVisible.value = false
      }
    })
  listByInterest({ tagIds: selectedTags.value })
    .then((res) => {
      if (res.data.success == true) {
        courseList.value = res.data.data
      }
    })
}


const title = ref('')

function getCourseByTagId(tag) {
  title.value = tag.name
  // 调用后台查询对应标签的所有课程数据
  listByTagId({ id: tag.id })
    .then((res) => {
      if (res.data.success == true) {
        console.log("对应课程数据：" + JSON.stringify(res.data.data))
        console.log(res.data.data.createTime)
        courseList.value = res.data.data
      }
    })
}

// 新增轮播数据
const carouselItems = ref([])

listByRecommend().then((res) => {
  console.log('获取所有标签数据：' + JSON.stringify(res.data.data))
  carouselItems.value = res.data.data
})

const props = defineProps({
  course: {
    type: Object,
    required: true
  }
});

// 价格格式化（保留两位小数）
const formatPrice = (price) => {
  return Number(price).toFixed(2);
};


function goLogin() {
  router.push({ path: '/login' })
}

function goOrder() {
  router.push('/order')
}

function goCollect() {
  router.push('/collect')
}

// 跳转文章详情页
const goArticleDetailPage = (id) => {
  router.push('/article/' + id)
}

// 跳转视频详情页
const goVideoDetailPage = (id) => {
  router.push('/video/' + id)
}

// 搜索相关数据
const searchDialogVisible = ref(false)
const searchKeyword = ref('')
const searchResults = ref([])
const searchTotal = ref(0)
const currentPage = ref(1)
const pageSize = ref(5)
const queryParams = reactive({
  title: ''
})

// 搜索课程
const searchCourses = async () => {
  try {
    const res = await search({
      title: searchKeyword.value,
      current: currentPage.value,
      size: pageSize.value
    })
    if (res.data.success) {
      searchResults.value = res.data.data
      searchTotal.value = res.data.total
    }
  } catch (error) {
    console.error('搜索失败:', error)
  }
}

// 添加高亮关键字的方法
const highlightKeyword = (text) => {
  if (!searchKeyword.value || !text) return text;
  const reg = new RegExp(searchKeyword.value, 'gi');
  return text.replace(reg, match => `<span class="highlight-keyword">${match}</span>`);
}

// 处理页码改变
const handlePageChange = (page) => {
  currentPage.value = page
  searchCourses()
}

// 打开搜索对话框
const openSearchDialog = () => {
  searchDialogVisible.value = true
  searchKeyword.value = queryParams.title || ''
  searchResults.value = []
  searchTotal.value = 0
  currentPage.value = 1
}

// 清除搜索
const clearSearch = () => {
  queryParams.title = ''
}

// 跳转到课程详情
const goToCourseDetail = (course) => {
  searchDialogVisible.value = false
  if (course.type === 0) {
    router.push(`/article/${course.id}`)
  } else {
    router.push(`/video/${course.id}`)
  }
}

</script>
<template>
  <!-- 主容器使用Element布局 -->
  <el-container class="home-container">
    <!-- 导航栏 -->
    <el-header class="header">
      <div class="nav-container">
        <div class="logo">
          高校<span class="blue">互联网技术</span>在线学习平台
        </div>
        <el-menu mode="horizontal" :default-active="activeIndex">
          <el-menu-item index="1">
            <router-link to="/">首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/article-course">图文课程</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/video-course">视频课程</router-link>
          </el-menu-item>
        </el-menu>
        <div class="search-box">
          <el-input
            v-model="queryParams.title"
            placeholder="搜索课程..."
            class="search-input"
            @focus="openSearchDialog"
            clearable
            @clear="clearSearch">
            <template #suffix>
              <el-icon class="el-input__icon" @click="openSearchDialog"><Search /></el-icon>
            </template>
          </el-input>
        </div>
        <!-- 未登录状态 -->
        <div class="user-wrapper" v-if="!userInfo">
          <el-button type="primary" class="login-btn" @click="goLogin" round>
            <i class="el-icon-user"></i>
            <span>登录 / 注册</span>
          </el-button>
        </div>

        <!-- 已登录状态 -->
        <div class="user-panel" v-else>
          <el-dropdown trigger="hover">
            <div class="user-card">
              <div class="profile">
                <el-avatar :src="userInfo.avatar" :size="36" class="user-avatar"
                  :style="{ backgroundColor: '#8ac8ff' }" />
              </div>
            </div>

            <!-- 下拉菜单 -->
            <template #dropdown>
              <el-dropdown-menu class="user-menu">
                                <el-dropdown-item class="menu-item" @click="info = true">
                                    <i class="el-icon-user-solid"></i>个人信息
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item" @click="order = true">
                                    <i class="el-icon-time"></i>我的订单
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item" @click="goCollect">
                                    <i class="el-icon-star-off"></i>我的收藏
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item" @click="password = true">
                                    <i class="el-icon-lock"></i>修改密码
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item logout" @click="logout">
                                    <i class="el-icon-switch-button"></i>退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <!-- 主内容区 -->
    <el-main class="main-content">
      <!-- 轮播布局 -->
      <el-row class="main-section">
        <el-col>
          <el-carousel height="350px" indicator-position="outside" class="enhanced-carousel">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
              <div class="carousel-slide" 
                   @click="item.type === 0 ? goArticleDetailPage(item.id) : goVideoDetailPage(item.id)"
                   style="cursor: pointer;">
                <!-- 图片容器 -->
                <div class="image-wrapper">
                  <img :src="item.cover" :alt="item.title" class="carousel-image">
                </div>

                <!-- 悬浮标题 -->
                <div class="floating-title">
                  <h3 class="title-text">{{ item.title }}</h3>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>

      <h2 class="section-title" style="color: #303133; padding-top: 20px; font-size: 25px;">分类导航</h2>

      <div class="category-container">
        <el-dropdown v-for="(category, index) in categories" :key="index" placement="top-start" trigger="hover">
          <!-- 主菜单按钮 -->
          <el-button class="category-tag" @mouseenter="handleMouseEnter(category.id)"
            @mouseleave="handleMouseLeave(category.id)">
            {{ category.name }}
          </el-button>

          <!-- 下拉子菜单 -->
          <template #dropdown>
            <el-dropdown-menu class="submenu">
              <el-dropdown-item v-for="(tag, index) in tags" :key="index" class="submenu-item"
                @click="getCourseByTagId(tag)">
                {{ tag.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>


      <!-- 推荐课程 -->
      <div class="course-section">
        <div class="section-header">
          <h2 class="section-title" v-if="title === ''" style="color: #303133;  font-size: 25px;">为你推荐</h2>
          <h2 class="section-title" v-else="title ===''" style="color: #303133;  font-size: 25px;">{{ title }}</h2>

          <el-button class="custom-btn" type="primary" round @click="interestdialogVisible = true">
            选择感兴趣标签为你推荐
          </el-button>
        </div>
        <el-row :gutter="20">
          <el-col v-for="course in courseList" :key="course.id" :xs="24" :sm="12" :md="8" :lg="6">
            <div class="course-card">
              <!-- 图片区域 -->
              <div class="cover-container">
                <img :src="course.cover" alt="课程封面" class="cover-image" v-if="course.type === 0"
                  @click="goArticleDetailPage(course.id)">
                <img :src="course.cover" alt="课程封面" class="cover-image" v-else @click="goVideoDetailPage(course.id)">
                <!-- 只保留价格标签 -->
                <div v-if="course.price > 0" class="price-tag">
                  {{ formatPrice(course.price) }} 元
                </div>
              </div>
              <!-- 文字内容 -->
              <div class="content-wrapper">
                <!-- 主标题 -->
                <h3 class="main-title">
                  {{ course.title }}
                </h3>

                <!-- 底部信息 -->
                <div class="footer-info">
                  <el-tag effect="plain" type="success" round v-if="course.type === 0">图文</el-tag>
                  <el-tag effect="plain" type="primary" round v-else>视频</el-tag>
                  <span class="likes">{{ course.watchNums }} 人看过</span>
                  <span class="time">{{ course.username }} - {{ moment(course.createTime).format('MM-DD') }}</span>
                </div>
              </div>
            </div>
          </el-col>

        </el-row>
        <div class="empty-container">
          <h3 v-if="courseList.length === 0" style="color: #606266">该标签下暂时还没有课程哦~</h3>
        </div>
      </div>


    </el-main>
    <!-- 选择兴趣弹出框 -->
    <el-dialog v-model="interestdialogVisible" title="选择兴趣" width="60%">
      <el-checkbox-group v-model="selectedTags">
        <div class="tag-container">
          <el-checkbox v-for="tag in tagList" :key="tag.id" :label="tag.id" size="large" border>
            {{ tag.name }}
          </el-checkbox>
        </div>
      </el-checkbox-group>

      <template #footer>
        <el-button @click="interestdialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveInterestTags">确定</el-button>
      </template>
    </el-dialog>

    <!-- 搜索对话框 -->
    <el-dialog
      v-model="searchDialogVisible"
      title="搜索课程"
      width="800px"
      :close-on-click-modal="false">
      <div class="search-dialog-content">
        <!-- 搜索输入框 -->
        <div class="search-input-wrapper">
          <el-input
            v-model="searchKeyword"
            placeholder="输入课程名称..."
            class="dialog-search-input"
            @keyup.enter="searchCourses">
            <template #append>
              <el-button @click="searchCourses">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
            </template>
          </el-input>
        </div>

        <!-- 搜索结果列表 -->
        <div class="search-results" v-if="searchResults.length > 0">
          <div v-for="course in searchResults" 
               :key="course.id" 
               class="search-result-item"
               @click="goToCourseDetail(course)">
            <el-image :src="course.cover" class="result-image"></el-image>
            <div class="result-info">
              <h3 class="result-title" v-html="highlightKeyword(course.title)"></h3>
              <p class="result-summary" v-html="highlightKeyword(course.summary)"></p>
              <div class="result-meta">
                <span class="result-type">{{ course.type === 0 ? '图文课程' : '视频课程' }}</span>
                <span class="result-price" v-if="course.price > 0">¥{{ formatPrice(course.price) }}</span>
                <span class="result-time">{{ moment(course.createTime).format('YYYY-MM-DD') }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 无结果提示 -->
        <div v-else-if="searchKeyword" class="no-results">
          未找到相关课程
        </div>

        <!-- 分页 -->
        <div class="pagination-wrapper" v-if="searchTotal > 0">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :total="searchTotal"
            layout="prev, pager, next"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </el-dialog>
  </el-container>

  <!--个人信息对话框-->
  <el-dialog v-model="info" title="个人信息" width="500px"  class="custom-dialog">
    <el-form :model="form1" label-width="80px" style="padding: 10px;">
      <el-form-item label="头像">
        <div style="display: flex; align-items: center;">
          <el-avatar :src="form1.avatar" :icon="UserFilled" style="background-color: #8ac8ff; margin-right: 10px;" />
          <el-upload
              :on-change="handleAvatarChange"
              :auto-upload="false"
              :show-file-list="false"
              :file-list="fileList">
            <el-button size="small" type="primary">修改头像</el-button>
          </el-upload>
        </div>
      </el-form-item>

      <el-form-item label="用户名">
        <el-input v-model="form1.username" autocomplete="off" placeholder="请输入用户名" style="width: 130px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" style="text-align: right;">
        <el-button @click="info = false">取消</el-button>
        <el-button type="primary" @click="saveInfo">保存</el-button>
      </div>
    </template>
  </el-dialog>

  <!--修改密码对话框-->
  <el-dialog v-model="password" title="修改密码" width="500px" class="custom-dialog">
    <el-form :model="form2" label-width="80px" style="padding: 10px;">
      <el-form-item label="旧密码">
        <el-input type="password" v-model="form2.password" autocomplete="off" placeholder="请输入旧密码"
          style="width: 200px" />
      </el-form-item>
      <el-form-item label="新密码">
        <el-input type="password" v-model="form2.newPassword" autocomplete="off" placeholder="请输入新密码"
          style="width: 200px" />
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password" v-model="form2.surePassword" autocomplete="off" placeholder="请确认新密码"
          style="width: 200px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" style="text-align: right;">
        <el-button @click="password = false">取消</el-button>
        <el-button type="primary" @click="savePassword">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>



<style lang="scss" scoped>
$primary-blue: #409EFF;
$hover-blue: rgba(64, 158, 255, 0.1);

.empty-container {
  /* 容器撑满父级 */
  width: 100%;
  height: 130px;
  /* 根据需求调整高度 */

  /* Flex 居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-wrapper {
  .login-btn {
    padding: 8px 20px;
    font-weight: 500;
    background: linear-gradient(135deg, $primary-blue 0%, #66b1ff 100%);
    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba($primary-blue, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba($primary-blue, 0.3);
    }

    i {
      font-size: 16px;
    }
  }
}

.user-panel {
  .user-card {
    // 增加圆角弧度（原8px -> 16px）
    border-radius: 16px; // 主要修改点1
    padding: 8px 16px; // 增加内边距
    background: rgba(255, 255, 255, 0.96);
    transition: all 0.3s ease;

    .profile {
      gap: 16px; // 增加头像与文字间距

      .user-avatar {
        // 调大头像尺寸（原36px -> 48px）
        width: 48px !important; // 主要修改点2
        height: 48px !important;
        border: 3px solid white; // 加粗边框
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .username {
        // 修改为蓝色系（原#333）
        color: $primary-blue; // 主要修改点3
        font-weight: 500;
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

:deep(.user-menu) {
  padding: 8px 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border: 1px solid #ebeef5;

  .menu-item {
    padding: 10px 20px;
    color: #606266;
    transition: all 0.2s ease;

    i {
      margin-right: 12px;
      color: $primary-blue;
    }

    &:hover {
      background: $hover-blue;
      color: $primary-blue;
      transform: translateX(4px);
    }

    &.logout {
      color: #F56C6C;

      i {
        color: currentColor;
      }
    }
  }

  .menu-divider {
    margin: 8px 0;
    background-color: #ebeef5;
  }
}

@media (max-width: 768px) {
  .user-card {
    border-radius: 24px !important; // 移动端更大圆角

    .user-avatar {
      width: 40px !important; // 移动端尺寸调整
      height: 40px !important;
    }
  }
}

/* 新增价格标识样式 */
.cover-container {
  position: relative;
}

.price-tag {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #ff6b6b;
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
  /* 渐变背景增强视觉效果 */
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
  /* 文字阴影增强可读性 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* 原样式优化 */
.course-card {
  width: 320px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.course-card:hover {
  transform: translateY(-4px);
}

.cover-container {
  height: 180px;
}

.cover-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  position: relative;
}

.content-wrapper {
  padding: 16px;
}

.main-title {
  font-size: 16px;
  line-height: 1.4;
  height: 45px;
  margin: 0 0 12px 0;
  color: #333;
}

.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: #666;
  font-size: 12px;
}

.tag-line {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #909399;
  font-size: 12px;
}

.likes {
  color: #ff5656;
}

:deep(.tag-container) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px; // 标签间距
  padding: 12px 0;

  .el-checkbox {
    margin: 0;
    padding: 12px 16px; // 内边距调整[1,4](@ref)
    border-radius: 8px;
    transition: all 0.3s ease;

    &__label {
      font-size: 14px;
      padding-left: 8px;
    }
  }
}

/* 按钮式复选框 */
.custom-tag {
  margin: 8px;

  .el-checkbox__input {
    display: none;
    /* 隐藏原生复选框 */
  }

  .el-checkbox__label {
    padding: 12px 24px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: all 0.3s;
  }

  &.is-checked .el-checkbox__label {
    background: var(--el-color-primary-light-9);
    border-color: var(--el-color-primary);
  }
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  max-height: 400px;
  overflow-y: auto;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;

  .custom-btn {
    margin-left: auto; // 推至最右侧
    border-radius: 14px; // 强化圆角[1,6](@ref)
    padding: 12px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }
}

/* 修改后的精准样式 */
.category-container {
  display: flex;
  gap: 8px;
  margin: 0 auto 15px;  // 减少下方间距
  padding: 15px 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  justify-content: flex-start;
  max-width: 1200px;
  
  .category-tag {
    padding: 8px 16px;  // 适度增加内边距
    border-radius: 16px;
    font-size: 14px;  // 适度增加字体
    transition: all 0.3s;
    min-width: 90px;  // 适度增加宽度
    text-align: center;
    border: 1px solid #abadb2b3;
    background: #ffffff;
    height: auto !important;
    width: auto !important;
    color: #606266;
    
    &:hover, &.active {
      background: #409eff;
      color: white;
      transform: translateY(-2px);
      border-color: #409eff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
    }
  }
}

.submenu {
  min-width: 120px;
  padding: 6px 0;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  
  .submenu-item {
    padding: 6px 12px;
    font-size: 13px;
    transition: all 0.3s;
    text-align: center;
    color: #606266;
    
    &:hover {
      background: #f0f2f5;
      color: #409eff;
    }
  }
}

/* 保持下拉菜单位置对齐 */
:deep(.el-popper) {
  margin-top: 4px !important;
}

/* 响应式处理 */
@media (max-width: 768px) {
  .category-container {
    justify-content: flex-start;
    padding: 8px;
  }

  .category-tag {
    padding: 6px 12px;
    font-size: 13px;
  }
}

.home-container {
  background: #fff;
  min-height: 100vh;

  /* 容器布局 */
  .header {
    height: 70px !important;
    background: #ffffff;
    /* 纯白背景替代毛玻璃 */
    border-bottom: 1px solid #ebeef5;
  }

  .nav-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 24px;
  }

  /* Logo样式 */
  .logo {
    font-size: 24px;
    font-weight: 600;
    margin-right: 48px;
    color: #303133;
  }

  .logo .blue {
    color: #409eff;
  }

  /* 导航菜单核心配置 */
  .el-menu--horizontal {
    background: transparent !important;
    border-bottom: none !important;
    flex: 1;
  }

  .el-menu-item {
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    padding: 0 28px;
    color: #606266;
    transition: color 0.3s;
  }

  .el-menu-item.is-active {
    color: #409eff !important;
    border-bottom: 2px solid #409eff;
  }

  /* 搜索框定制 */
  .search-box {
    margin-left: auto;
    margin-right: 24px;
  }

  .search-box .el-input {
    --el-input-border-radius: 20px;
    --el-input-bg-color: #f5f7fa;
  }

  .search-box .el-input__wrapper {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  /* 用户面板 */
  .user-panel .el-button {
    border-radius: 20px;
    padding: 10px 24px;
    background: #409eff;
    color: white;
  }

  .main-content {
    max-width: 1400px; // 扩大容器宽度
    width: 98%; // 增加自适应能力

    .course-section {
      .el-col {
        @media (min-width: 1200px) {
          flex: 0 0 25%; // 大屏显示4列课程卡片
          max-width: 25%;
        }
      }
    }

    margin: 0 auto;
    padding: 20px;



    .category-sidebar {
      .section-title {
        color: #303133;
        font-size: 20px;
        margin-bottom: 15px;
      }

      .category-item {
        display: flex;
        align-items: center;
        padding: 7px;
        transition: all 0.3s;

        &:hover {
          background: #f8f9fa;
          transform: translateX(5px);
        }

        .icon-box {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          margin-right: 15px;
        }

        .cate-name {
          font-size: 16px;
          color: #606266;
        }
      }
    }

    /* 轮播容器优化 */
    .enhanced-carousel {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* 轮播项容器 */
    .carousel-slide {
      position: relative;
      width: 100%;
      height: 100%;
    }

    /* 图片容器 */
    .image-wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    /* 图片填充处理 */
    .carousel-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 保持比例填充容器 */
      object-position: center;
      /* 图片中心裁剪 */
      transition: transform 0.3s ease;
    }

    /* 悬浮标题样式 */
    .floating-title {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px 30px;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
      color: white;
    }

    .title-text {
      margin: 0;
      font-size: 1.5em;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* 指示器样式优化 */
    :deep(.el-carousel__indicators--outside) {
      bottom: 40px;
      /* 调整指示器位置 */
    }


    /* 悬停效果 */
    @media (hover: hover) {
      .carousel-image:hover {
        transform: scale(1.03);
      }
    }

    .course-section {
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
      }

      .course-card {
        transition: all 0.3s;
        margin: 0 10px 15px; // 增加左右间距
        width: calc(100% - 20px); // 防止溢出

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .course-cover {
          height: 180px;
          background: #909399;
          border-radius: 4px;
          margin-bottom: 15px;
        }

        .title {
          color: #303133;
          font-size: 16px;
          margin-bottom: 12px;
        }

        .meta {
          display: flex;
          justify-content: space-between;
          color: #909399;

          .price {
            color: #F56C6C;
            font-weight: bold;
          }
        }
      }
    }
  }
}

/* 子菜单卡片样式 */
.category-item {
  position: relative;
  /* 建立定位基准 */

  .submenu-card {
    position: absolute;
    left: calc(100% + 15px);
    /* 右侧间距 */
    width: 200px;
    // z-index: 999; /* 确保覆盖轮播图 */
    z-index: 9999 !important;
    /* 临时测试 */
    background: white;
    border: none;

    /* 与原轮播图阴影保持一致 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    /* 避免覆盖原分类项的hover效果 */
    pointer-events: none;
  }

  /* 子项交互优化 */
  .submenu-content {
    pointer-events: auto;
    padding: 10px;

    .sub-item {
      padding: 8px 12px;
      transition: background 0.2s;

      &:hover {
        background: #f5f7fa;
        cursor: pointer;
      }
    }
  }
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(-10px);
}

.fade-leave-to {
  opacity: 0;
}

.section-title {
  position: relative;
  color: #303133;
  font-size: 25px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;

  &::before {
    content: '';
    width: 4px;
    height: 25px;
    background: linear-gradient(180deg, #409eff, #79bbff);
    border-radius: 2px;
    margin-right: 15px;
  }
}

.course-section {
  .section-header {
    .section-title {
      position: relative;
      color: #303133;
      font-size: 25px;
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      &::before {
        content: '';
        width: 4px;
        height: 25px;
        background: linear-gradient(180deg, #409eff, #79bbff);
        border-radius: 2px;
        margin-right: 15px;
      }
    }
  }
}

/* 搜索对话框样式 */
.search-dialog-content {
  .search-input-wrapper {
    margin-bottom: 20px;
    
    .dialog-search-input {
      width: 100%;
    }
  }

  .search-results {
    max-height: 500px;
    overflow-y: auto;
  }

  .search-result-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #f5f7fa;
    }

    .result-image {
      width: 120px;
      height: 80px;
      border-radius: 4px;
      object-fit: cover;
    }

    .result-info {
      flex: 1;
      margin-left: 15px;
      display: flex;
      flex-direction: column;

      .result-title {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
        margin: 0 0 8px;
      }

      .result-type {
        font-size: 13px;
        color: #409EFF;
        margin-bottom: 5px;
      }

      .result-time {
        font-size: 12px;
        color: #909399;
      }
    }
  }

  .no-results {
    text-align: center;
    padding: 40px 0;
    color: #909399;
    font-size: 14px;
  }

  .pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}

/* 搜索结果样式 */
.search-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 10px;
}

.search-result-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-result-item:hover {
  background-color: #f5f7fa;
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.result-image {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
}

.result-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.result-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.result-summary {
  font-size: 14px;
  color: #606266;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 13px;
  color: #909399;
}

.result-type {
  background-color: #e1f3ff;
  color: #409EFF;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.result-price {
  color: #ff4d4f;
  font-weight: 500;
}

.result-time {
  color: #909399;
}

:deep(.highlight-keyword) {
  color: #ff4d4f;
  font-weight: 500;
  padding: 0 2px;
}

/* 搜索输入框样式 */
.search-input-wrapper {
  margin-bottom: 20px;
}

.dialog-search-input {
  .el-input__inner {
    border-radius: 4px 0 0 4px;
  }
  
  :deep(.el-input-group__append) {
    background-color: #409EFF;
    border-color: #409EFF;
    color: white;
    
    .el-button {
      color: white;
      border: none;
      
      &:hover {
        background-color: #66b1ff;
      }
    }
  }
}

/* 分页样式 */
.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>